import React, { useRef } from "react";
import Hello from "./components/Hello";

export default function App() {
  const helloRef = useRef();

  function handleClick() {
    // console.log(helloRef.current); // Hello 这个类组件的实例对象
    console.log(helloRef.current.refs.inputRef); // <input />
  }

  return (
    <div className="app">
      <h1>App</h1>
      <button onClick={handleClick}>获取Hello组件的 input</button>
      <hr />
      <Hello ref={helloRef} />
    </div>
  );
}

/**
 * 需求：
 *
 * 1. 父组件获取子组件的普通元素
 *    helloRef.current.refs.inputRef
 *
 * 2. 父组件 helloRef.current 希望直接就能得到 Hello 组件的 input 元素
 *
 *    ref 转发  React.forwardRef()
 */
